<template>
    <div>
        <ul class="tab">
            <li v-for="(item,index) in tabList" :key="index" @click="tabIndex = index" :class="{'li-active' : index == tabIndex }">{{item}}</li>
        </ul>

        <template v-if="tabIndex == 0">
            <div class="attr-content-box">
                <h2>元件设置</h2>
                <div class="attr-part" v-for="(item,index) in attributes.list" :key="index">
                    <!-- <div class="title content-between" @click="item.o=!item.o"> -->
                    <div class="title content-between" @click="listIndex == index ? listIndex = -1 : listIndex = index">
                        <div>
                            导航图文{{index+1}}
                            <i v-if="listIndex == index" class="el-icon-arrow-up"></i>
                            <i v-else class="el-icon-arrow-down"></i>
                        </div>
                        <div class="icon-group" @click.stop>
                            <el-button v-if="index>0" type="primary" icon="el-icon-arrow-up" circle size="mini" @click="arrSwap(index,'up')"></el-button>
                            <el-button v-if="index>0" type="primary" icon="el-icon-upload2" circle size="mini" @click="arrSwap(index,'top')"></el-button>
                            <el-button v-if="index<attributes.list.length-1" type="primary" icon="el-icon-arrow-down" circle size="mini" @click="arrSwap(index,'down')"></el-button>
                            <el-button v-if="index<attributes.list.length-1" type="primary" icon="el-icon-download" circle size="mini" @click="arrSwap(index,'bottom')"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="dele(index)"></el-button>
                        </div>
                    </div>
                    <div v-if="listIndex == index">
                        <el-form label-position="right" label-width="75px">
                            <el-form-item label="导航名称">
                                 <el-input size="small" placeholder="请输入内容" v-model="item.text.t"></el-input>
                                 <el-checkbox v-model="item.text.s">隐藏</el-checkbox>
                            </el-form-item>
                            <el-form-item label="文字样式">
                                <el-radio-group v-model="item.text.d">
                                    <el-radio :label="false">默认</el-radio>
                                    <el-radio :label="true">自定义</el-radio>
                                </el-radio-group>
                                <CustomText v-if="item.text.d" :text="item.text"/>
                            </el-form-item>
                            <el-form-item label="图片设置">
                                <el-radio-group v-model="item.img.s">
                                    <el-radio :label="1">默认</el-radio>
                                    <el-radio :label="2">隐藏</el-radio>
                                    <el-radio :label="3">自定义</el-radio>
                                </el-radio-group>
                                <div class="center part-upload" v-if="item.img.s==3">
                                    上传图片：
                                    <div class="upload show-img" v-if="item.img.i">
                                        <i class="el-icon-close" @click.stop="item.img.i=''"></i>
                                        <img :src="item.img.i" alt="">
                                    </div>
                                    <UploadImg v-else @change="changeIconP($event,item)"/>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <el-button class="add_page" type="primary" round icon="el-icon-plus" @click="partAdd">添加</el-button>
            </div>
        </template>
        
        <template v-if="tabIndex == 1">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="模块背景">
                    <SetBackground :base="attributes.base"/>
                </el-form-item>
                <el-form-item label="文字颜色">
                    <el-color-picker v-model="attributes.base.fc" size="small"></el-color-picker>
                </el-form-item>
                <el-form-item label="模块排版">
                    <el-select v-model="attributes.base.c" placeholder="请选择" size="small">
                        <el-option label="四列" :value="4"></el-option>
                        <el-option label="五列" :value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模块间隙">
                    <el-radio-group v-model="attributes.base.m">
                        <el-radio :label="true">显示</el-radio>
                        <el-radio :label="false">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            tabList:['基础设置','样式设置'],
            tabIndex: 0,
            listIndex: -1
        }
    },
    computed:{
		...mapState(['attributes'])
    },
    methods: {
        // 上传元件图片
        changeIconP(res,item){
            item.img.i = res
        },
        // 上传背景图片
        changeBaseBi(img){
            this.attributes.base.bi = img;
        },
        // 切换数组位置
        arrSwap(index,type){
            this.$store.commit('arrPartSwap',{index,type})
        },
        // 新增元件
        partAdd(){
            this.$store.commit('partAdd')
        },
        // 删除当前模块
        dele(index){
            this.$store.commit('partDele',index)
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/attr.scss';

.attr-part{
    .title{height: 40px;border-bottom: 1px solid #eee;padding: 0 10px;box-sizing: border-box;font-size: 14px;color: #666;cursor: pointer;user-select: none;
        .icon-group{.el-button{margin: 0;transform: scale(.8)}}
    }
    /deep/  .el-form-item__label{font-size: 13px}
    .part-upload{font-size: 13px;color: #666}
}
.add_page{width: 329px;margin: 20px auto;}


</style>
